<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .out{
            border: solid 1px #aaa;
            width: 380px;
            height: 50px;
            margin-bottom: 28px;
        }
        .name{
            width: 70px;
            display: inline-block;
            padding: 15.5px 10px;
            margin-left: 10px;
            margin-right: 15px;
            text-align-last: justify;
            font-size: 14px;
        }
        .inp{
            height: 25px;
            width: 200px;
            border: none;
            color: #aaa;
            outline: none;
        }
        .p{
            display: none;
            margin-top: 3px;
            margin-bottom: 9px;
            color: #aaa;
            font-size: 10px;
        }
        #btn{
            border: none;
            width: 380px;
            height: 50px;
            background-color: red;
            color: #fff;
            text-align: center
        }
    </style>
</head>
<body>
    <div class="out">
        <span class="name">用户名</span>
        <input class="inp" type="text" value="您的账户名和登录名"/>
    </div>
    <p class="p">支持中文数字，字符为4-20个</p>
    <div class="out">
        <span class="name">设置密码</span>
        <input class="inp" type="text" value="建议至少使用两种字符组合"/>
    </div>
    <p class="p">建议至少使用两种字符组合，6-20个字符</p>
    <div class="out">
        <span class="name">确认密码</span>
        <input class="inp" type="text" value="请再次输入密码"/>
    </div>
    <p class="p">请再次输入密码</p>
    <div class="out">
        <span class="name">中国0086</span>
        <input class="inp" type="text" value="建议使用常用手机"/>
    </div>
    <p class="p">完成验证后，您可以使用该号找回密码</p>
    <div class="out">
        <span class="name">手机验证码</span>
        <input class="inp" type="text" value="请输入手机验证码"/>
    </div>
    <p class="p">支持中文数字，字符为4-20个</p>
    <button id="btn">立即注册</button>

    <script>
        var out = document.getElementsByClassName('out');
        var inp = document.getElementsByClassName('inp');
        var p = document.getElementsByClassName('p');
        var arr = [];  //存放文本框下方出现提示信息

        for(var i=0;i<p.length;i++){
            arr[i] = p[i].innerText;
        }
        for(let i=0;i<inp.length;i++){
            inp[i].onfocus = function(){
                this.value =""; 
                inp[i].style.color = "black";
                p[i].style.display = "block";
                out[i].style.marginBottom = 0 + 'px';   
                // 使得每次聚焦时都能出现正确的提示字体
                out[i].style.borderColor = "#aaa"
                out[i].style.borderWidth = 1 + "px";
                p[i].innerText = arr[i];
                p[i].style.color = "#aaa";
            } 
            inp[i].onblur = function(){
                if(i!=1){
                    if(inp[i].value.length < 4){
                        p[i].innerText = "长度需大于4";
                        p[i].style.color = "red";
                        out[i].style.borderColor = "red";
                        out[i].style.borderWidth = 1.5 + "px";
                        p[i].style.marginBottom = 8.5 + "px";
                    }else{
                        //使得每次点击时边框始终保持正确颜色
                        if(out[i].style.borderColor == "red"){
                            out[i].style.borderColor = "#aaa"
                            out[i].style.borderWidth = 1 + "px";
                        }
                        p[i].style.display = "none";
                        out[i].style.marginBottom = 28 + 'px';
                    }
                }else{
                    if(inp[i].value.length < 6){
                        p[i].innerText = "长度需大于6";
                        p[i].style.color = "red";
                        out[i].style.borderColor = "red";
                        out[i].style.borderWidth = 1.5 + "px";
                        p[i].style.marginBottom = 8.5 + "px";
                    }else{
                        if(out[i].style.borderColor == "red"){
                            out[i].style.borderColor = "#aaa"
                            out[i].style.borderWidth = 1 + "px";
                        }
                        p[i].style.display = "none";
                        out[i].style.marginBottom = 28 + 'px';
                    }
                }                
            }   
        }
    </script>
</body>
</html>